<script src="jquery-3.2.1.js"></script>
<meta charset="UTF-8">

<body style="display:none">
<!-- 一个让程序员使用class并引入js来实现效果 -->
<div  class="menu">
    <div>123</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
</div>

<div  class="menu">
    <div>123</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
</div>

<div class="menu">
    <div>123</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
    <div>456</div>
</div>

</body>
<script>
    $(start);

    function start(){
       $(".menu").each(
           function(){
               installMenu($(this));
           }
       );

        $(".menu").hover(
            function() {
                $(this).find(">div:gt(0)").toggle();
            }
        );
        $("body").show();
    }

    function installMenu(m){
        m.find(">div:gt(0)").hide();
    }
</script>
